<!DOCTYPE html>
<html>

	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta charset="UTF-8">
		<title>悬浮</title>
		<link rel="stylesheet" href="awesome/css/font-awesome.css" />
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
	</head>
	<style>
		/**
		 * id 样式选择器  #
		 * . class 类选择器
		 * div 元素选择器
		 * div div > + ~
		 * :first :eq(12323)
		 */
		
		body {
			margin: 0px;
			padding: 0px;
			background-image: url(img/login-background.jpg);
		}
		
		#containers div {
			box-shadow: 3px 3px 5px gray;
			border :1px solid blue;
			background-color: #ee3f4d;
			color: white;
			margin-bottom: 10px;
			width:100vw;

		}
		#head{
			height:10vh;
		}
		
		#containers {
			/*
			 * 弹性容器
			 display 渲染方式 ：  
			 block(块状)  
			 none（不渲染） 
			 inline(内联) 
			 inline-block;(内联块) 
			 flex : (弹性容器)
			 * */
			/*display: -webkit-flex;*/
			display: flex;
			flex-direction:column;
			align-items:center;
			align-content:center;
			padding:auto;
			margin:auto;
			/*justify-content: center;*/
			width: 96vw;
			height: 96vh;
		}
	</style>

	<body>
		<div id="containers">
			<div id="head">
				1
			</div>
			<div id="userinfo">
				2
			</div>
			<div id="login">
				3
			</div>
			<div id="register">
				4
			</div>
			<div id="tools">
				5
			</div>
		</div>
	</body>

</html>